<template>
	<view>
		<image :src="imgUrl" mode="aspectFill" style="width: 750rpx;height: 100vh;"></image>
		<view class="poster_content">
			<view class=""
				style="width: 617rpx;height: 157rpx; background-color: #FFF8ED; text-align: center;line-height: 157rpx; color: #FA9700;font-size: 34rpx; margin: 0 auto;">
				{{postName}}
			</view>
			<view class="poster_content_erCode" style="">
				<ayQrcode ref="qrcode" qrcode_id="qrcode" :modal="modal_qr" :url="url" @hideQrcode="hideQrcode"
					:height="117" :width="117" />
			</view>
		</view>
		<!-- 保存本地 立即分享 -->
		<view class="poster_bottom">
			<view class="poster_bottom_one" @click="getPhoto">
				保存本地
			</view>
			<view class="poster_bottom_two" @click="show=true">
				立即分享
			</view>
		</view>
		<u-popup v-model="show" mode="bottom">
			<view style="line-height: 50px; text-align: center;">
				分享微信好友
			</view>
			<view style="padding: 20px 200rpx; display: flex; text-align: center; justify-content: space-around;">
				<view @click="publish(1)" style="width: 33.3%;">
					<image src="/static/wx.png" style="width: 50px; height: 50px;"></image>
					<view>
						微信
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		poster
	} from "@/common/config/request.js"
	import ayQrcode from "@/components/ay-qrcode/ay-qrcode.vue"
	export default {
		components: {
			ayQrcode,
		},
		data() {
			return {
				//二维码相关参数
				modal_qr: false,
				user_id: uni.getStorageSync('userdata').id,
				// url: 'https://pixabay.com/images/search/?order=ec', // 要生成的二维码值
				url: '',
				imgUrl: "", //海报图片
				postName: "", //标题语
				show: false,
			}
		},

		onLoad() {
			let that = this;
			this.url = "https://xzxj.wsframe.com/register.html?postId=" + this.user_id
			console.log(this.url)
			that.showQrcode(); //一加载生成二维码
			this.getPoster() //获取海报
		},
		methods: {
			// 下载图片
			getPhoto() {
				// console.log(this.url)
				this.$refs.qrcode.saveImage()
			},
			publish(id) {
				if (id == 1) {
					// console.log('微信分享')
					var that = this
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 0,
						href: that.url,
						title: "邀请好友",
						summary: "快来注册吧",
						imageUrl: "",
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				}
			},
			getPoster() {
				poster({}).then(res => {
					console.log(res, '海报')
					if (res.data.code == 1) {
						this.imgUrl = res.data.data.image
						this.postName = res.data.data.name
					}
				})
			},
			// 展示二维码
			showQrcode() {
				let _this = this;
				this.modal_qr = true;
				// uni.showLoading()
				setTimeout(function() {
					// uni.hideLoading()
					_this.$refs.qrcode.crtQrCode()
					_this.$refs.qrcode2.crtQrCode()
					_this.$refs.qrcode3.crtQrCode()
					_this.$refs.qrcode4.crtQrCode()
				}, 100)
			},

			//传入组件的方法
			hideQrcode() {
				this.modal_qr = false;
			},
		}

	}
</script>

<style lang="scss">
	.poster_content {
		width: 710rpx;
		height: 554rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		position: fixed;
		left: 20rpx;
		top: 20%;
		text-align: center;
		box-sizing: border-box;
		padding-top: 40rpx;

		.poster_content_erCode {
			width: 234rpx;
			margin: 0 auto;
			margin-top: 40rpx;
		}
	}

	.poster_bottom {
		width: 750rpx;
		position: fixed;
		left: 0;
		bottom: 100rpx;
		box-sizing: border-box;
		padding-bottom: 20rpx;

		.poster_bottom_one {
			width: 670rpx;
			height: 90rpx;
			line-height: 90rpx;
			border: 1rpx solid #FFFFFF;
			box-shadow: 4rpx 5rpx 9rpx rgba(219, 33, 3, 0.59);
			opacity: 1;
			border-radius: 45rpx;
			margin: 0 auto;
			font-size: 38rpx;
			font-family: SourceHanSansCN-Medium;
			color: #FFFFFF;
			text-align: center;
		}

		.poster_bottom_two {
			width: 670rpx;
			height: 90rpx;
			line-height: 90rpx;
			// border: 1rpx solid #FFFFFF;
			background: rgba(254, 190, 9, 0.39);
			box-shadow: 4px 5px 9px rgba(219, 33, 3, 0.59);
			border-radius: 45rpx;
			margin: 0 auto;
			font-size: 38rpx;
			font-family: SourceHanSansCN-Medium;
			color: #FFFFFF;
			text-align: center;
			margin-top: 20rpx;
		}
	}
</style>
